<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style type="text/css">
    div#app-view,
    div#app-view > div {
      width: 100%;
      height: 100%;
    }
  </style>
  <body>
    <div class="box" style="display: flex; height: 100vh">
      <div>
        <ul style="width: 300px">
          <li onclick="onClick(this)">/login</li>
          <li onclick="onClick(this)">/user</li>
          <li onclick="onClick(this)">/main</li>
        </ul>
        <button onclick="router.back()">back</button>
        <button onclick="router.go(2)">go(2)</button>
        <button onclick="router.go(-1)">go(-1)</button>
        <button onclick="router.replace('/user')">replace('/user')</button>
      </div>
      <div id="app-view"></div>
    </div>
    <div style="width: 200px; height: 200px"></div>
  </body>
  <script type="module">
    import Router from './Router.js'
    const routes = {
      '/login': { component: '<div style="background-color: green;">login</div>' },
      '/user': { component: '<div style="background-color: blue;">user</div>' },
      '/main': { component: '<div style="background-color: red;">main</div>' }
    }
    const router = new Router({ mode: 'hash', selector: '#app-view', routes })
    window.router = router
  </script>
  <script>
    function onClick(current) {
      console.log(current.textContent)
      router.push(current.textContent)
    }
    function getStorageSize(type = 'local') {
      const storage = type === 'local' ? localStorage : sessionStorage
      storage.clear()
      const tenBytes = '8' // 1字节
      const oneKB = new Array(1024).fill(tenBytes).join('') // 1KB
      let key = 0
      let flag = true
      while (flag) {
        try {
          storage.setItem(key + '', oneKB)
          key += 1
        } catch (error) {
          flag = false
          console.log('size:', (key + key / 1024) / 1024 + 'MB')
          storage.clear()
        }
      }
    }
    function getUsedStorage(type = 'local') {
      const storage = type === 'local' ? localStorage : sessionStorage
      return (
        Object.entries(storage)
          .map(entry => entry.join(''))
          .join('').length /
        1024 /
        1024
      )
    }
    // Array.prototype.reduce((previousValue, currentValue, currentIndex, array) => {}, initialValue)
    Array.prototype.myReduce = function (fn, initVal) {
      const arr = this
      let res = initVal
      arr.forEach((item, index) => {
        res = fn.apply(arr, [res, item, index, arr])
      })
      return res
    }
    const arr = [1, 2, 3, 4, 5]
    const val = arr.myReduce((pre, current) => pre + current, 0)
    console.log(val)
    // getLocalStorageSize()
  </script>
</html>
